<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="石油钻井实时监控系统">
    <title>石油钻井监控系统</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
    <div class="connection-status disconnected" id="connectionStatus">● 未连接</div>

    <div class="container">
        <div class="header">
            <h1>🛢️ 中国石化</h1>
            <div class="status">System Online | Real-time Monitoring</div>
        </div>

        <div class="charts-container">
            <div class="chart-wrapper">
                <div class="chart-title">井深 (m)</div>
                <div id="chartWellDepth" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <div class="chart-title">顶驱扭矩 (KNm)</div>
                <div id="chartTorque" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <div class="chart-title">顶驱转速 (转/分钟)</div>
                <div id="chartRpm" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <div class="chart-title">立管压力 (Kpa)</div>
                <div id="chartPressure" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <div class="chart-title">入口流量 (L/min)</div>
                <div id="chartFlow" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <div class="chart-title">钻时 (m/hr)</div>
                <div id="chartRop" class="chart"></div>
            </div>
            <div class="chart-wrapper">
                <div class="chart-title">钻压 (KDN)</div>
                <div id="chartWob" class="chart"></div>
            </div>
        </div>

        <div class="metrics-panel">
            <div class="metric-card">
                <div class="metric-label">井深</div>
                <div class="metric-value">
                    <span id="valueWellDepth">--</span>
                    <span class="metric-unit">m</span>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-label">顶驱扭矩</div>
                <div class="metric-value">
                    <span id="valueTorque">--</span>
                    <span class="metric-unit">KNm</span>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-label">顶驱转速</div>
                <div class="metric-value">
                    <span id="valueRpm">--</span>
                    <span class="metric-unit">转/分钟</span>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-label">立管压力</div>
                <div class="metric-value">
                    <span id="valuePressure">--</span>
                    <span class="metric-unit">Kpa</span>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-label">入口流量</div>
                <div class="metric-value">
                    <span id="valueFlow">--</span>
                    <span class="metric-unit">L/min</span>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-label">钻时</div>
                <div class="metric-value">
                    <span id="valueRop">--</span>
                    <span class="metric-unit">m/hr</span>
                </div>
            </div>
            <div class="metric-card">
                <div class="metric-label">钻压</div>
                <div class="metric-value">
                    <span id="valueWob">--</span>
                    <span class="metric-unit">KDN</span>
                </div>
            </div>
        </div>
    </div>

    <script type="module" src="/src/main.js"></script>
</body>
</html>